﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="/wwwroot/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <script type="text/javascript" src="/wwwroot/common/js/jquery-1.12.4.js"></script>
    <title>文件上传</title>
    <style>
        .drop-area {
            border: 2px dashed #007bff;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            margin: 20px auto;
            max-width: 800px;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }
        .drop-area.dragover {
            border-color: #28a745;
            background: #e9f5e9;
        }
        .file-preview {
            max-width: 800px;
            margin: 20px auto;
        }
        .file-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }
        .file-icon {
            width: 24px;
            margin-right: 10px;
        }
        .progress {
            height: 20px;
            margin: 10px 0;
        }
        .upload-btn {
            margin: 20px;
            padding: 10px 30px;
            font-size: 16px;
        }
    </style>
</head>
<body class="bg-light">
    <div class="container">
        <h2 class="text-center my-4">文件上传</h2>
        
        <div id="drop-area" class="drop-area">
            <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
            <h4>拖放文件到这里上传</h4>
            <p class="text-muted">或点击选择文件</p>
            <input type="file" id="fileInput" multiple style="display:none;">
        </div>

        <div id="file-preview" class="file-preview"></div>

        <div class="text-center">
            <button id="confirmBtn" class="btn btn-primary upload-btn">
                <i class="fas fa-upload"></i> 开始上传
            </button>
            <button id="backBtn" class="btn btn-secondary upload-btn">
                <i class="fas fa-arrow-left"></i> 返回
            </button>
        </div>
    </div>

    <script>
        $(function() {
            const dropArea = $('#drop-area');
            const filePreview = $('#file-preview');
            let selectedFiles = [];

            // Prevent default drag behaviors
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropArea.on(eventName, function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                });
            });

            // Highlight drop area
            ['dragenter', 'dragover'].forEach(eventName => {
                dropArea.on(eventName, function() {
                    dropArea.addClass('dragover');
                });
            });

            ['dragleave', 'drop'].forEach(eventName => {
                dropArea.on(eventName, function() {
                    dropArea.removeClass('dragover');
                });
            });

            // Handle dropped files
            dropArea.on('drop', function(e) {
                const files = e.originalEvent.dataTransfer.files;
                handleFiles(files);
            });

            // Handle file input
            dropArea.on('click', function() {
                $('#fileInput').trigger('click');
            });

            $('#fileInput').on('change', function(e) {
                if (this.files && this.files.length > 0) {
                    handleFiles(this.files);
                }
            });

            // Back button
            $('#backBtn').on('click', function() {
                window.history.back();
                setTimeout(() => window.location.reload(), 100);
            });

            function handleFiles(files) {
                if (!files.length) return;
                
                filePreview.empty();
                selectedFiles = [];

                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    selectedFiles.push(file);
                    
                    const fileItem = $(`
                        <div class="file-item">
                            <i class="fas fa-file file-icon text-primary"></i>
                            <div class="flex-grow-1">
                                <div>${file.name}</div>
                                <div class="text-muted small">${formatBytes(file.size)}</div>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                                </div>
                            </div>
                        </div>
                    `);
                    
                    filePreview.append(fileItem);
                }
            }

            // Confirm button
            $('#confirmBtn').on('click', function() {
                if (selectedFiles.length === 0) {
                    alert('请先选择文件');
                    return;
                }
                
                selectedFiles.forEach((file, index) => {
                    uploadFile(file, index);
                });
            });

            function uploadFile(file, index) {
                const parentGuid = new URLSearchParams(window.location.search).get('parentGuid') || '';
                const spaceType = new URLSearchParams(window.location.search).get('spaceType') || '1';
                const formData = new FormData();
                formData.append('file', file);
                formData.append('parentGuid', parentGuid);

                const progressBar = $('.progress-bar').eq(index);
                const fileItem = $('.file-item').eq(index);

                $.ajax({
                    url: `http://localhost:8060/api/file/uploadFile?spaceType=${spaceType}&parentGuid=${parentGuid}&randomCode=${Date.now()}`,
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    xhr: function() {
                        const xhr = new XMLHttpRequest();
                        xhr.upload.addEventListener('progress', function(e) {
                            if (e.lengthComputable) {
                                const percent = Math.round((e.loaded / e.total) * 100);
                                progressBar.css('width', percent + '%');
                            }
                        }, false);
                        return xhr;
                    },
                    success: function(response) {
                        fileItem.addClass('text-success');
                        progressBar.addClass('bg-success');
                        if (index === selectedFiles.length - 1) {
                            setTimeout(() => {
                                window.location.href = `list.html?parentGuid=${parentGuid}&spaceType=${spaceType}`;
                            }, 1000);
                        }
                    },
                    error: function() {
                        fileItem.addClass('text-danger');
                        progressBar.addClass('bg-danger');
                        progressBar.text('上传失败');
                    }
                });
            }

            function formatBytes(bytes) {
                if (bytes === 0) return '0 Bytes';
                const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                const i = Math.floor(Math.log(bytes) / Math.log(1024));
                return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + ' ' + sizes[i];
            }
        });
    </script>
</body>
</html>
